<template>
  <el-cascader
    ref="addr"
    :value="value"
    :placeholder="placeholder"
    :disabled="disabled"
    clearable
    :key="modalKey"
    :options="options"
    @change="handleChange"
    @blur="handleBlur"
    @visible-change="handleVisibleChange"
    :props="cascaderProps"
  >
  </el-cascader>
</template>
<script>
import { cloneDeep } from "lodash";
export default {
  data() {
    return {
      cascaderProps: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        checkStrictly: true,
        leaf: "leaf",
        startlevel: 0,
        label: "label",
        value: "value",
        maxlevel: 4, //最后一层  0 国家 1省 2市 3区 4街道
        ...this.addrProps,
      },
      options: [],
      modalKey: 0,
    };
  },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: [Array, String],
    },
    addrProps: {
      type: Object,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
  },
  mounted() {
    if (!this.cascaderProps.lazy) {
      this.getOptions();
    }
  },
  methods: {
    async getOptions() {
      const data = await this.getDict(["areaAll"]);
      const areaAll = cloneDeep(data.areaAll);
      if (this.cascaderProps.startlevel === 1) {
        this.options = areaAll[0].children;
      } else {
        this.options = areaAll;
      }
      this.setLevel(this.options, this.cascaderProps.maxlevel);
    },
    setLevel(data, end, index = this.cascaderProps.startlevel) {
      data.forEach((i) => {
        if (index !== end && i.children) {
          this.setLevel(i.children, end, index + 1);
        } else {
          i.children = null;
        }
      });
    },
    async lazyLoad(node, resolve) {
      if (node.level > Number(this.cascaderProps.maxlevel - 1))
        return resolve(null); // 尝试措施
      let level = node.value;
      if (node.level === 0) {
        level = this.cascaderProps.startlevel === 1 ? "000000" : "nation";
      }
      if (this.cascaderProps.defaultSource) {
        setTimeout(() => {
          resolve(this.cascaderProps.defaultSource);
        }, 500);
        return;
      }
      const data = await this.getDict([level]);
      const arr = data[level].map((i) => {
        return {
          ...i,
          leaf:
            +i.remarks === this.cascaderProps.maxlevel || +i.remarks > 1000000,
        };
      });
      resolve(arr);
    },
    getSelectNode(label = "inputValue") {
      return this.$refs.addr[label];
    },
    dataUpdate() {
      this.modalKey++;
    },
    getLastValue() {
      return this.value[this.value.length - 1];
    },
    handleChange(val) {
      this.$emit("change", val);
    },
    handleBlur(val) {
      this.$emit("blur", val);
    },
    handleVisibleChange(val) {
      this.$emit("visible-change", val);
    },
  },
};
</script>
<style lang=""></style>
